<script setup lang="ts">



import LineChart from "@/components/LineChart.vue";
import SunburstChart from "@/components/SunburstChart.vue";
import SankeyChart from "@/components/SankeyChart.vue";
import BarChart from "@/components/BarChart.vue";
import WordCloudCharts from "@/components/WordCloudCharts.vue";
</script>

<template>
  <div class="content">
    <div class="title">
      基于python的招聘数据爬取与可视化
    </div>
    <div class="row">
      <div class="column">
        <line-chart></line-chart>
        <sunburst-chart></sunburst-chart>
      </div>
      <div class="column">
        <sankey-chart></sankey-chart>
      </div>
      <div class="column">
        <bar-chart></bar-chart>
        <word-cloud-charts></word-cloud-charts>
      </div>
    </div>
  </div>
</template>

<style scoped>
.content{
  background-image: url("src/assets/cool-background.png");
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.title{
  font-size: 32px;
  height: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.row{
  display: flex;
  flex-direction: row;
  height: 90vh;
}
.column{
  width: 100%;
  display: flex;
  flex-direction: column;
}
</style>